<script setup>
import {onMounted, ref, computed} from 'vue'
import SearchInfo from "../components/SearchInfo.vue";
import {MoreInfoData} from "../store/page.js";
import {ScanHistory, ScanLiveHosts, ScanVulInfo} from "../net/api.js";
import { h } from 'vue'
import { ElNotification } from 'element-plus'
import {useRouter} from "vue-router";

const router = useRouter()

/**
 * @typedef {
 *   {
 *     ip: string
 *     ports: number[]
 *     vul: string[]
 *
 *   }
 * } IpSacnData
 *
 * @typedef {
 *   {
 *     searchIp: string
 *     date: string
 *     ipScan: IpSacnData[]
 *   }
 * } VulInfoData
 *
 * */

const searchTotal = computed(() => {
  return vulData.value.length
})
const searchVulTotal = computed(() => {
    let total = 0
    vulData.value.forEach(value => {
      value.ipScan.forEach(v => {
        total += v.vul.length
      })
    })
  return total
})

const searchRiskVulTotal = computed(() => {
  return searchVulTotal.value
})

const showMoreInfo = ref(false)

/**
 * @type { import('vue').Ref<VulInfoData[]>}
 * */
const vulData = ref([])


onMounted(async () => {
  try {
    let data =  await ScanHistory()

    for (let i = 0; i < data.length; i++) {

      let [year,mouth, day] = data[i].taskStartTime.split('T')[0].split('-')

      /**@type {VulInfoData}*/
      let oneTaskVulData = {ipScan: [], searchIp: data[i].ip, date: `${mouth}-${day}`}

      let portData = await ScanLiveHosts({
        taskid: data[i].taskid
      })

      portData.forEach(value => {
        oneTaskVulData.ipScan.push({
          ip: value.ip,
          ports: value.ports,
          vul: []
        })
      })

      let vulDataResp = await ScanVulInfo({
        taskid: data[i].taskid
      })

      vulDataResp.forEach(value => {
        let index = oneTaskVulData.ipScan.findIndex(v => v.ip === value.ip)
        if (index === -1)  {
          oneTaskVulData.ipScan.push({
            ip: value.ip,
            vul: value.vul,
            ports: []
          })
          return
        }

        oneTaskVulData.ipScan[index].vul = value.vul
      })

      vulData.value.push(oneTaskVulData)
    }

  } catch (e) {
    ElNotification({
      title: '错误',
      message: h('i', { style: 'color: teal' }, e),
    })
  }
})

/**
 * @param {VulInfoData} v
 * @return {number}
 * */
function getPortNumFromVulListInfo(v) {
  let total = 0
  v.ipScan.forEach(value => {
    total += value.ports.length
  })
  return total
}

/**
 * @param {VulInfoData} v
 * @return {number}
 * */
function getVulNumFromVulListInfo(v) {
  let total = 0
  v.ipScan.forEach(value => {
    total += value.vul.length
  })
  return total
}



/**
 * @param {VulInfoData} v
 * */
function toMoreInfo(v) {
  MoreInfoData.data = v
  router.push({
    path: '/more/info'
  })
}

</script>

<template>
  <div class="info-root">
    <div class="info-header">
      <div class="info-left-header">
        <div style="grid-column: 4 / 5;grid-row: 2 / 4; width: 100%; height: 100%">
          <img src="../assets/images/searchlog.png" style="max-height: 100%" />
        </div>
        <div style="grid-column: 1 / 3; grid-row: 1 / 6; color: #32417C; font-size: 80px; display: flex; justify-content: end; align-items: end;">
          {{ searchTotal }}
        </div>
        <div style="grid-column: 3 / 5; grid-row: 2 / 6; color: #32417C; font-size: 15px; display: flex; justify-content: start; align-items: end;">
          次搜索
        </div>
      </div>
      <div style="width: 100%; height: 40%; background-color: #D9D9D9"></div>
      <div class="info-left-mid">
        <div style="grid-column: 2 / 3;grid-row: 2 / 4; width: 100%; height: 100%">
          <img src="../assets/images/searching.png" style="max-height: 100%" />
        </div>
<!--        <div style="grid-column: 1 / 3; grid-row: 1 / 6; color: #32417C; font-size: 80px; display: flex; justify-content: end; align-items: end;">-->
<!--          {{ searchTotal }}-->
<!--        </div>-->
        <div style="grid-column: 2 / 3; grid-row: 2 / 6; color: #32417C; font-size: 15px; display: flex; justify-content: start; align-items: end;">
          共发现
        </div>
        <div style="grid-column: 4 / 4; grid-row: 1 / 6; color: #32417C; font-size: 70px; display: flex; justify-content: start; align-items: end;">
          {{ searchVulTotal }}
        </div>
        <div style="grid-column: 5 / 6; grid-row: 2 / 6; color: #32417C; font-size: 15px; display: flex; justify-content: end; align-items: end;">
          个漏洞
        </div>
      </div>
      <div style="width: 100%; height: 40%; background-color: #D9D9D9"></div>
      <div class="info-left-header">
        <div style="grid-column: 2 / 3;grid-row: 2 / 4; width: 100%; height: 100%">
          <img src="../assets/images/risk.png" style="max-height: 100%" />
        </div>
        <div style="grid-column: 2 / 4; grid-row: 2 / 6; color: #32417C; font-size: 15px; display: flex; justify-content: start; align-items: end;">
          高危漏洞
        </div>
        <div style="grid-column: 4 / 5; grid-row: 1 / 6; color: #32417C; font-size: 80px; display: flex; justify-content: end; align-items: end;">
          {{ searchRiskVulTotal }}
        </div>
        <div style="grid-column: 5 / 6; grid-row: 2 / 6; color: #32417C; font-size: 15px; display: flex; justify-content: start; align-items: end;">
          个
        </div>
      </div>
    </div>
    <div>
      <div style="width: 100%; height: 90%; display: flex; flex-direction: column; align-items: center; margin-top: 5%; overflow: hidden">
        <ul  class="infinite-list" style="overflow: auto; width: 95%; height: 100%">
          <div style="margin-top: 20px" v-for="v in vulData" @click="toMoreInfo(v)" >
            <SearchInfo
                :ip="v.searchIp"
                :ip-number="v.ipScan.length"
                use-time="3:23"
                :date="v.date"
                :vul-number="getVulNumFromVulListInfo(v)"
                :port-number="getPortNumFromVulListInfo(v)"
            >
            </SearchInfo>
          </div>
        </ul>

      </div>
    </div>
  </div>
</template>

<style scoped>

.info-root {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 20% 80%;
  background-color: #DFE1EE;
}

.info-header {
  width: 100%;
  height: 100%;
  background-color: #F6F5FB;
  box-shadow: #737578 0 2px 3px;
  display: grid;
  grid-template-columns: 29% 0.5% 40% 0.5% 29%;
  grid-template-rows: 1fr;
  place-items: center;
}

.info-left-mid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
}

.info-left-header {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(7, 1fr);
}

.infinite-list {
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}

</style>